<template>
  <div class="box">
    <!-- 第一栏 -->
    <el-card style="width: 1206px; height: 150px">
      <el-form :inline="true" :model="formInline">
        <el-form-item label="学科编号">
          <el-input
            style="width: 100px; height: 39px"
            v-model="formInline.user"
          />
        </el-form-item>

        <el-form-item label="学科名称">
          <el-input v-model="formInline.number" />
        </el-form-item>

        <el-form-item label="创建者">
          <el-input
            style="width: 100px; height: 39px"
            v-model="formInline.creator"
          />
        </el-form-item>

        <!-- 状态下拉框 -->
        <el-form-item prop="status" label="状态">
          <el-select v-model="formInline.region" placeholder="请选择状态">
            <el-option label="禁用" value="shanghai"></el-option>
            <el-option label="启用" value="beijing"></el-option>
          </el-select>
        </el-form-item>

        <!-- 按钮 -->
        <el-button type="primary">搜索</el-button>
        <el-button>清除</el-button>
        <el-button type="primary" @click="Showfn">+新增学科</el-button>
      </el-form>
    </el-card>

    <!-- 弹框组件 -->
    <el-dialog
      style="text-align: center"
      title="新增学科"
      width="600px"
      :visible.sync="isShow"
    >
      <el-form :model="formDate" ref="form" :rules="rules" label-width="100px">
        <el-form-item prop="rid" label="学科编号">
          <el-input v-model="formDate.rid" autocomplete="off" />
        </el-form-item>
        <el-form-item prop="name" label="学科名称">
          <el-input v-model="formDate.name" autocomplete="off" />
        </el-form-item>
        <el-form-item prop="short_name" label="学科简称">
          <el-input v-model="formDate.short_name" autocomplete="off" />
        </el-form-item>
        <el-form-item prop="intro" label="学科简介">
          <el-input v-model="formDate.intro" autocomplete="off" />
        </el-form-item>
        <el-form-item prop="remark" label="学科备注">
          <el-input v-model="formDate.remark" autocomplete="off" />
        </el-form-item>
        <el-form-item>
          <template>
            <div>
              <el-button @click="cancel">取 消</el-button>
              <el-button type="primary" @click="isShowfn">确 定</el-button>
            </div>
          </template>
        </el-form-item>
      </el-form>
    </el-dialog>

    <!-- 第二栏 -->
    <el-card style="width: 1206px">
      <el-table :data="Datalist" style="width: 100%; margin-bottom: 44px">
        <el-table-column prop="id" label="序号" width="50"> </el-table-column>
        <el-table-column prop="rid" label="学科编号" width="100">
        </el-table-column>
        <el-table-column prop="name" label="学科名称" width="120">
        </el-table-column>
        <el-table-column prop="short_name" label="简称" width="120">
        </el-table-column>
        <el-table-column prop="username" label="创建者"> </el-table-column>
        <el-table-column prop="create_time" label="创建日期"> </el-table-column>
        <el-table-column prop="status" label="状态"> </el-table-column>

        <el-table-column label="操作">
          <template v-slot="{ row }">
            <el-button @click="editor(row)" type="text">编辑</el-button>
            <el-button @click="disable" type="text">禁用</el-button>
            <el-button @click="open(row.id)" type="text">删除</el-button>
          </template>
        </el-table-column>
      </el-table>

      <!-- 第三栏 -->
      <div class="block" style="text-align: center">
        <el-pagination
          :current-page="currentPage4"
          :page-sizes="[100, 200, 300, 400]"
          :page-size="100"
          layout="total, sizes, prev, pager, next, jumper"
          :total="400"
        >
        </el-pagination>
      </div>
    </el-card>
  </div>
</template>

<script>
// 导入封装好的网络请求
import {
  subjecTlist,
  subjecTadd,
  subjectRemove
  // subjecTedit
} from '@/api/science.js'
export default {
  data () {
    return {
      // 第一栏
      formInline: {
        user: '',
        number: '',
        creator: '',
        region: ''
      },
      // 第二栏
      formDate: {
        rid: '', // 是	string	学科编号
        name: '', // 是	string	学科名称
        short_name: '', // 否	string	学科简称
        intro: '', // 否	string	学科简介
        remark: '' // 否	string	备注
      },
      // 第三栏
      currentPage4: 4,

      // 弹框组件
      form: {
        rid: '', // 是	string	学科编号
        name: '', // 是	string	学科名称
        short_name: '', // 否	string	学科简称
        intro: '', // 否	string	学科简介
        remark: '' // 否	string	备注
      },
      formLabelWidth: '100px',
      // 表单验证
      rules: {
        name: [
          { required: true, message: '请输入学科编号', trigger: 'change' }
          // {
          //   min: 3,
          //   max: 5,
          //   message: '长度在 3 到 5 个字符',
          //   trigger: 'change'
          // }
        ],
        rid: [
          { required: true, message: '请输入学科名称', trigger: 'change' }
          // {
          //   min: 3,
          //   max: 5,
          //   message: '长度在 3 到 5 个字符',
          //   trigger: 'change'
          // }
        ]
      },
      // 弹框的默认隐藏
      isShow: false,
      // 设置一个空数组接收后台数据
      Datalist: []
    }
  },
  // 一打开页面就调用后台数据
  created () {
    this.getData()
  },
  methods: {
    // 创建一个空的函数(学科列表)
    async getData () {
      const res = await subjecTlist()
      console.log(res)
      this.Datalist = res.data.items
    },

    // 取消按钮
    cancel () {
      this.isShow = false
      this.formDate = {
        rid: '', // 是	string	学科编号
        name: '', // 是	string	学科名称
        short_name: '', // 否	string	学科简称
        intro: '', // 否	string	学科简介
        remark: '' // 否	string	备注
      }
    },
    // 确认按钮
    dialogFormVisibl () {},
    // 确认按钮的全局表单验证
    isShowfn () {
      // console.log(row)
      this.$refs.form.validate(async (val) => {
        if (val) {
          // 打印科学列表
          console.log('获取科学列表', this.formDate)
          // 添加科学列表
          await subjecTadd(this.formDate)
          this.$message.success('验证成功')
          // 输入完成后清空表单
          this.$refs.form.resetFields()
          this.isShow = false
          this.formDate = {
            rid: '', // 是	string	学科编号
            name: '', // 是	string	学科名称
            short_name: '', // 否	string	学科简称
            intro: '', // 否	string	学科简介
            remark: '' // 否	string	备注步骤
          }
          // 刷新父级列表
          this.getData()
        } else {
          this.$message.success('请输入内容')
        }
      })
    },
    // 新增学科开关按钮
    Showfn () {
      this.isShow = true
    },
    // 编辑按钮
    async editor (row) {
      this.isShow = true
      // await subjecTedit(this.formDate)
      this.formDate = row
      console.log('s', this.$refs.form)
      console.log(row)
    },
    // 禁用按钮
    disable () {},
    // 删除按钮的弹框
    open (id) {
      this.$confirm('你确定删除此学科吗?', '提示', {
        confirmButtonText: '确定删除',
        cancelButtonText: '点错了',
        type: 'warning'
      }).then(async () => {
        await subjectRemove({ id })

        // 刷新父级列表数据
        this.getData()

        this.$message({
          type: 'warning',
          message: '删除成功!'
        })
      })
    }
  }
}
</script>

<style lang="less">
.el-main {
  display: block;
  flex: 1;
  flex-basis: auto;
  overflow: auto;
  box-sizing: border-box;
  padding: 10px;
}
.dialog-footer {
  text-align: center;
}
.el-dialog__header {
  background-color: #66b1ff;
}
.el-dialog__title {
  color: #fff;
}
i.el-dialog__close.el-icon.el-icon-close {
  color: #fff;
}
</style>
